<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <text class="header-back" @click="goBack">返回</text>
            <text class="header-title">笔记详情</text>
        </view>

        <!-- 图片展示 -->
        <view class="image-container">
            <image
                v-if="detail.image && !isEditing"
                class="detail-image"
                :src="detail.image"
            />
            <text class="no-image-text" v-else-if="!detail.image && !isEditing">暂无图片</text>

            <!-- 编辑模式：图片上传 -->
            <view v-if="isEditing" class="edit-image-container">
                <view class="upload-box" @click="chooseImage">
                    <text v-if="!detail.image">+</text>
                    <image v-if="detail.image" class="upload-image" :src="detail.image" />
                </view>
            </view>
        </view>

        <!-- 详细信息 -->
        <view class="info">
            <!-- 查看模式 -->
            <view v-if="!isEditing">
                <text class="title">{{ detail.title }}</text>
                <view class="category-container">
                    <text class="category">分类: {{ detail.category }}</text>
                </view>
                <text class="content" selectable="true">{{ detail.notes }}</text>
                <text class="time">时间: {{ detail.time }}</text>
            </view>

            <!-- 编辑模式 -->
            <view v-else>
                <input class="input" v-model="detail.title" placeholder="请输入标题" />
                <view class="category">
                    <text class="category-label">分类:</text>
                    <view class="category-buttons">
                        <button
                            v-for="(item, index) in categories"
                            :key="index"
                            class="category-button"
                            :class="{ active: detail.category === item }"
                            @click="selectCategory(item)"
                        >
                            {{ item }}
                        </button>
                    </view>
                    <!-- 嵌入式其他分类输入框 -->
                    <view v-if="showOtherInput" class="other-category-input">
                        <input
                            v-model="otherCategoryInput"
                            placeholder="请输入具体分类"
                            @input="updateOtherCategory"
                        />
                    </view>
                </view>

                <!-- 备注编辑框 -->
                <textarea
                    class="textarea"
                    v-model="detail.notes"
                    placeholder="请输入备注"
                ></textarea>
            </view>
        </view>

        <!-- 按钮 -->
        <view class="button-container">
            <button class="edit-button" v-if="!isEditing" @click="startEditing">编辑</button>
            <button class="save-button" v-else @click="saveChanges">保存</button>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            detail: {}, // 当前笔记详情数据
            originalDetail: {}, // 初始笔记数据（用于比对）
            isEditing: false, // 是否进入编辑模式
            categories: ['人文', '科技', '课内知识', '其他'], // 分类选项
            showOtherInput: false, // 是否显示“其他”分类的输入框
            otherCategoryInput: '' // “其他”分类的具体内容
        };
    },
    onLoad(options) {
        try {
            this.detail = JSON.parse(decodeURIComponent(options.data));
            this.originalDetail = JSON.parse(decodeURIComponent(options.data));
        } catch (e) {
            console.error('数据解析失败', e);
            this.detail = {};
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        startEditing() {
            this.isEditing = true; // 切换到编辑模式
        },
        chooseImage() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    this.detail.image = res.tempFilePaths[0];
                }
            });
        },
        selectCategory(item) {
            if (item === '其他') {
                this.showOtherInput = true; // 显示输入框
                this.detail.category = ''; // 清空当前分类
            } else {
                this.showOtherInput = false; // 隐藏输入框
                this.detail.category = item; // 设置选中的分类
            }
        },
        updateOtherCategory() {
            this.detail.category = this.otherCategoryInput.trim();
        },
        saveChanges() {
            if (!this.detail.title || !this.detail.category || !this.detail.notes) {
                uni.showToast({ title: '请填写完整信息', icon: 'none' });
                return;
            }
            const favorites = uni.getStorageSync('favorites') || [];
            const index = favorites.findIndex(
                (item) => JSON.stringify(item) === JSON.stringify(this.originalDetail)
            );
            if (index !== -1) {
                favorites[index] = this.detail;
                uni.setStorageSync('favorites', favorites);
                uni.showToast({ title: '修改成功', icon: 'success' });
                this.isEditing = false;
                this.originalDetail = { ...this.detail };
            } else {
                uni.showToast({ title: '数据更新失败', icon: 'none' });
            }
        }
    }
};
</script>

<style scoped>
.container {
    background-color: #f7f8fa;
    min-height: 100vh;
    padding: 20rpx;
}

/* 顶部导航栏 */
.header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #7e57c2;
}
.header-back {
    color: #fff;
    font-size: 28rpx;
    margin-right: 20rpx;
    cursor: pointer;
}
.header-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
}

/* 图片容器 */
.image-container {
    width: 100%;
    height: auto;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    overflow: hidden;
}
.detail-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.no-image-text {
    font-size: 28rpx;
    color: #999;
}
.upload-box {
    width: 240rpx;
    height: 240rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 12rpx;
    font-size: 48rpx;
    color: #999;
}
.upload-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12rpx;
}

/* 详细信息 */
.info {
    background: #fff;
    padding: 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
}
.title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}
.category-container {
    margin-bottom: 10rpx;
    display: flex;
    justify-content: flex-end;
}
.category {
    font-size: 28rpx;
    color: #555;
}
.content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20rpx;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap; /* 保留换行 */
}
.time {
    font-size: 24rpx;
    color: #999;
    text-align: right;
}

/* 分类按钮 */
.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    margin-bottom: 10rpx;
}
.category-button {
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    border-radius: 12rpx;
    border: 1px solid #7e57c2;
    background-color: #f9f9f9;
    color: #7e57c2;
    cursor: pointer;
}
.category-button.active {
    background-color: #7e57c2;
    color: #fff;
}

/* 嵌入式输入框 */
.other-category-input {
    margin-top: 10rpx;
    width: 100%;
}
.other-category-input input {
    width: 100%;
    padding: 10rpx;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    font-size: 24rpx;
    background-color: #f9f9f9;
}

/* 按钮 */
.button-container {
    margin-top: 20rpx;
    display: flex;
    justify-content: flex-end;
}
.edit-button,
.save-button {
    padding: 20rpx 40rpx;
    font-size: 28rpx;
    color: #fff;
    border-radius: 12rpx;
    background: #7e57c2;
    box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
}
.save-button {
    background: #4caf50;
}
</style>
